<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Aquincum - premium admin template by Eugene Kopyov</title>

<link href="css/styles.css" rel="stylesheet" type="text/css" />
<!--[if IE]> <link href="css/ie.css" rel="stylesheet" type="text/css"> <![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript" src="js/plugins/forms/ui.spinner.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.mousewheel.js"></script>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript" src="js/plugins/charts/excanvas.min.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.orderBars.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.pie.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.resize.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.sparkline.min.js"></script>

<script type="text/javascript" src="js/plugins/tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/plugins/tables/jquery.sortable.js"></script>
<script type="text/javascript" src="js/plugins/tables/jquery.resizable.js"></script>

<script type="text/javascript" src="js/plugins/forms/autogrowtextarea.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.uniform.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.inputlimiter.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.maskedinput.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.autotab.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.chosen.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.dualListBox.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.cleditor.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.ibutton.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.validationEngine.js"></script>

<script type="text/javascript" src="js/plugins/uploader/plupload.js"></script>
<script type="text/javascript" src="js/plugins/uploader/plupload.html4.js"></script>
<script type="text/javascript" src="js/plugins/uploader/plupload.html5.js"></script>
<script type="text/javascript" src="js/plugins/uploader/jquery.plupload.queue.js"></script>

<script type="text/javascript" src="js/plugins/wizards/jquery.form.wizard.js"></script>
<script type="text/javascript" src="js/plugins/wizards/jquery.validate.js"></script>
<script type="text/javascript" src="js/plugins/wizards/jquery.form.js"></script>

<script type="text/javascript" src="js/plugins/ui/jquery.collapsible.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.breadcrumbs.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.tipsy.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.progress.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.timeentry.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.colorpicker.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.jgrowl.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.fileTree.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.sourcerer.js"></script>

<script type="text/javascript" src="js/plugins/others/jquery.fullcalendar.js"></script>
<script type="text/javascript" src="js/plugins/others/jquery.elfinder.js"></script>

<script type="text/javascript" src="js/plugins/ui/jquery.easytabs.min.js"></script>
<script type="text/javascript" src="js/files/bootstrap.js"></script>
<script type="text/javascript" src="js/files/functions.js"></script>

<!-- Shared on MafiaShare.net  --><!-- Shared on MafiaShare.net  --></head>

<body>

<!-- Top line begins -->
<div id="top">
	<div class="wrapper">
    	<a href="index.html" title="" class="logo"><img src="images/logo.png" alt="" /></a>
        
        <!-- Right top nav -->
        <div class="topNav">
            <ul class="userNav">
                <li><a title="" class="search"></a></li>
                <li><a href="#" title="" class="screen"></a></li>
                <li><a href="#" title="" class="settings"></a></li>
                <li><a href="#" title="" class="logout"></a></li>
                <li class="showTabletP"><a href="#" title="" class="sidebar"></a></li>
            </ul>
            <a title="" class="iButton"></a>
            <a title="" class="iTop"></a>
            <div class="topSearch">
            	<div class="topDropArrow"></div>
                <form action="">
                    <input type="text" placeholder="search..." name="topSearch" />
                    <input type="submit" value="" />
                </form>
            </div>
        </div>
        
        <!-- Responsive nav -->
        <ul class="altMenu">
            <li><a href="index.html" title="">Dashboard</a></li>
            <li><a href="ui.html" title="" class="exp">UI elements</a>
                <ul>
                    <li><a href="ui.html">General elements</a></li>
                    <li><a href="ui_icons.html">Icons</a></li>
                    <li><a href="ui_buttons.html">Button sets</a></li>
                    <li><a href="ui_grid.html">Grid</a></li>
                    <li><a href="ui_custom.html">Custom elements</a></li>
                    <li><a href="ui_experimental.html">Experimental</a></li>
                </ul>
            </li>
            <li><a href="forms.html" title="" class="exp" id="current">Forms stuff</a>
                <ul>
                    <li><a href="forms.html">Inputs &amp; elements</a></li>
                    <li><a href="form_validation.html" class="active">Validation</a></li>
                    <li><a href="form_editor.html">File uploads &amp; editor</a></li>
                    <li><a href="form_wizards.html">Form wizards</a></li>
                </ul>
            </li>
            <li><a href="messages.html" title="">Messages</a></li>
            <li><a href="statistics.html" title="">Statistics</a></li>
            <li><a href="tables.html" title="" class="exp">Tables</a>
                <ul>
                    <li><a href="tables.html">Standard tables</a></li>
                    <li><a href="tables_dynamic.html">Dynamic tables</a></li>
                    <li><a href="tables_control.html">Tables with control</a></li>
                    <li><a href="tables_sortable.html">Sortable &amp; resizable</a></li>
                </ul>
            </li>
            <li><a href="other_calendar.html" title="" class="exp">Other pages</a>
                <ul>
                    <li><a href="other_calendar.html">Calendar</a></li>
                    <li><a href="other_gallery.html">Images gallery</a></li>
                    <li><a href="other_file_manager.html">File manager</a></li>
                    <li><a href="other_404.html">Sample error page</a></li>
                    <li><a href="other_typography.html">Typography</a></li>
                </ul>
            </li>
        </ul>
        
        <div class="clear"></div>
    </div>
</div>
<!-- Top line ends -->


<!-- Sidebar begins -->
<div id="sidebar">

	<!-- Main nav -->
    <div class="mainNav">
        <div class="user">
            <a title="" class="leftUserDrop"><img src="images/user.png" alt="" /><span><strong>3</strong></span></a><span>Eugene</span>
            <ul class="leftUser">
                <li><a href="#" title="" class="sProfile">My profile</a></li>
                <li><a href="#" title="" class="sMessages">Messages</a></li>
                <li><a href="#" title="" class="sSettings">Settings</a></li>
                <li><a href="#" title="" class="sLogout">Logout</a></li>
            </ul>
        </div>
        
        <!-- Responsive nav -->
        <div class="altNav">
            <div class="userSearch">
                <form action="">
                    <input type="text" placeholder="search..." name="userSearch" />
                    <input type="submit" value="" />
                </form>
            </div>
            
            <!-- User nav -->
            <ul class="userNav">
                <li><a href="#" title="" class="profile"></a></li>
                <li><a href="#" title="" class="messages"></a></li>
                <li><a href="#" title="" class="settings"></a></li>
                <li><a href="#" title="" class="logout"></a></li>
            </ul>
        </div>
        
        <!-- Main nav -->
        <ul class="nav">
            <li><a href="index.html" title=""><img src="images/icons/mainnav/dashboard.png" alt="" /><span>Dashboard</span></a></li>
            <li><a href="ui.html" title=""><img src="images/icons/mainnav/ui.png" alt="" /><span>UI elements</span></a>
                <ul>
                    <li><a href="ui.html" title=""><span class="icol-fullscreen"></span>General elements</a></li>
                    <li><a href="ui_icons.html" title=""><span class="icol-images2"></span>Icons</a></li>
                    <li><a href="ui_buttons.html" title=""><span class="icol-coverflow"></span>Button sets</a></li>
                    <li><a href="ui_grid.html" title=""><span class="icol-view"></span>Grid</a></li>
                    <li><a href="ui_custom.html" title=""><span class="icol-cog2"></span>Custom elements</a></li>
                    <li><a href="ui_experimental.html" title=""><span class="icol-beta"></span>Experimental</a></li>
                </ul>
            </li>
            <li><a href="forms.html" title="" class="active"><img src="images/icons/mainnav/forms.png" alt="" /><span>Forms stuff</span></a>
                <ul>
                    <li><a href="forms.html" title=""><span class="icol-list"></span>Inputs &amp; elements</a></li>
                    <li><a href="form_validation.html" title=""><span class="icol-alert"></span>Validation</a></li>
                    <li><a href="form_editor.html" title=""><span class="icol-pencil"></span>File uploader &amp; WYSIWYG</a></li>
                    <li><a href="form_wizards.html" title=""><span class="icol-signpost"></span>Form wizards</a></li>
                </ul>
            </li>
            <li><a href="messages.html" title=""><img src="images/icons/mainnav/messages.png" alt="" /><span>Messages</span></a></li>
            <li><a href="statistics.html" title=""><img src="images/icons/mainnav/statistics.png" alt="" /><span>Statistics</span></a></li>
            <li><a href="tables.html" title=""><img src="images/icons/mainnav/tables.png" alt="" /><span>Tables</span></a>
                <ul>
                    <li><a href="tables.html" title=""><span class="icol-frames"></span>Standard tables</a></li>
                    <li><a href="tables_dynamic.html" title=""><span class="icol-refresh"></span>Dynamic table</a></li>
                    <li><a href="tables_control.html" title=""><span class="icol-bullseye"></span>Tables with control</a></li>
                    <li><a href="tables_sortable.html" title=""><span class="icol-transfer"></span>Sortable and resizable</a></li>
                </ul>
            </li>
            <li><a href="other_calendar.html" title=""><img src="images/icons/mainnav/other.png" alt="" /><span>Other pages</span></a>
                <ul>
                    <li><a href="other_calendar.html" title=""><span class="icol-dcalendar"></span>Calendar</a></li>
                    <li><a href="other_gallery.html" title=""><span class="icol-images2"></span>Images gallery</a></li>
                    <li><a href="other_file_manager.html" title=""><span class="icol-files"></span>File manager</a></li>
                    <li><a href="#" title="" class="exp"><span class="icol-alert"></span>Error pages <span class="dataNumRed">6</span></a>
                        <ul>
                            <li><a href="other_403.html" title="">403 error</a></li>
                            <li><a href="other_404.html" title="">404 error</a></li>
                            <li><a href="other_405.html" title="">405 error</a></li>
                            <li><a href="other_500.html" title="">500 error</a></li>
                            <li><a href="other_503.html" title="">503 error</a></li>
                            <li><a href="other_offline.html" title="">Website is offline error</a></li>
                        </ul>
                    </li>
                    <li><a href="other_typography.html" title=""><span class="icol-create"></span>Typography</a></li>
                    <li><a href="other_invoice.html" title=""><span class="icol-money2"></span>Invoice template</a></li>
                </ul>
            </li>
        </ul>
    </div>
    
    <!-- Secondary nav -->
    <div class="secNav">
        <div class="secWrapper">
            <div class="secTop">
                <div class="balance">
                    <div class="balInfo">Balance:<span>Apr 21 2012</span></div>
                    <div class="balAmount"><span class="balBars"><!--5,10,15,20,18,16,14,20,15,16,12,10--></span><span>$58,990</span></div>
                </div>
                <a href="#" class="triangle-red"></a>
            </div>
            
            <!-- Tabs container -->
            <div id="tab-container" class="tab-container">
                <ul class="iconsLine ic3 etabs">
                    <li><a href="#general" title=""><span class="icos-fullscreen"></span></a></li>
                    <li><a href="#alt1" title=""><span class="icos-user"></span></a></li>
                    <li><a href="#alt2" title=""><span class="icos-archive"></span></a></li>
                </ul>
                
                <div class="divider"><span></span></div>
                
                <div id="general">
                    <ul class="subNav">
                        <li><a href="forms.html" title=""><span class="icos-list"></span>Inputs &amp; elements</a></li>
                        <li><a href="form_validation.html" title="" class="this"><span class="icos-alert"></span>Validation</a></li>
                        <li><a href="form_editor.html" title=""><span class="icos-pencil"></span>File uploader &amp; WYSIWYG</a></li>
                        <li><a href="form_wizards.html" title=""><span class="icos-signpost"></span>Form wizards</a></li>
                    </ul>
                </div>
                
                <div id="alt1">
                    <div class="widget">
                        <div class="whead">
                            <h6><span class="icon-tree-view"></span>Simple jQuery file tree</h6>
                            <div class="clear"></div>
                        </div>
                        <div class="filetree"></div>
                    </div>
                    
                    <div class="divider"><span></span></div>
                
                    <div class="sidePad">
                        <a href="#" title="" class="sideB bBlue">Add new session</a>
                        <a href="#" title="" class="sideB bRed mt10">Add new session</a>
                        <a href="#" title="" class="sideB bGreen mt10">Add new session</a>
                        <a href="#" title="" class="sideB bBrown mt10">Add new session</a>
                        <a href="#" title="" class="sideB bGreyish mt10">Add new session</a>
                    </div>
                </div>
                
                <div id="alt2">
                    <div class="sideWidget">
                        <div class="inlinedate"></div>
                    </div>
                </div>
            </div>
            
             <div class="divider"><span></span></div>
            
            <!-- Sidebar buttons -->
            <div class="fluid sideWidget">
                <div class="grid6"><input type="submit" class="buttonS bRed" value="Cancel" /></div>
                <div class="grid6"><input type="submit" class="buttonS bGreen" value="Submit" /></div>
            </div>
    
            <div class="divider"><span></span></div>
        	
            <!-- Sidebar form -->
            <div class="sideWidget">
                <div class="formRow">
                    <label>Usual input field:</label>
                    <input type="text" name="regular" placeholder="Your name" />
                </div>
                <div class="formRow">
                   <label>Usual password field:</label>
                    <input type="password" name="regular" placeholder="Your password" /> 
                </div>
                <div class="formRow">
                    <label>Single file uploader:</label>
                    <input type="file" class="fileInput" id="fileInput" />
                </div>
                <div class="formRow">
                    <label>Dropdown menu:</label>
                    <select name="select2" >
                        <option value="opt1">Usual select box</option>
                        <option value="opt2">Option 2</option>
                        <option value="opt3">Option 3</option>
                        <option value="opt4">Option 4</option>
                        <option value="opt5">Option 5</option>
                        <option value="opt6">Option 6</option>
                        <option value="opt7">Option 7</option>
                        <option value="opt8">Option 8</option>
                    </select>
                </div>
                
                <div class="formRow searchDrop">
                    <label>Dropdown with search:</label>
                    <select data-placeholder="Choose a Country..." class="select" tabindex="2">
                        <option value=""></option> 
                        <option value="Cambodia">Cambodia</option> 
                        <option value="Cameroon">Cameroon</option> 
                        <option value="Canada">Canada</option> 
                        <option value="Cape Verde">Cape Verde</option> 
                        <option value="Cayman Islands">Cayman Islands</option> 
                        <option value="Central African Republic">Central African Republic</option> 
                        <option value="Chad">Chad</option> 
                        <option value="Chile">Chile</option> 
                        <option value="China">China</option> 
                        <option value="Christmas Island">Christmas Island</option> 
                        <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option> 
                        <option value="Colombia">Colombia</option> 
                        <option value="Comoros">Comoros</option> 
                        <option value="Congo">Congo</option> 
                        <option value="Congo, The Democratic Republic of The">Congo, The Democratic Republic of The</option> 
                        <option value="Cook Islands">Cook Islands</option> 
                        <option value="Costa Rica">Costa Rica</option> 
                        <option value="Cote D'ivoire">Cote D'ivoire</option> 
                        <option value="Croatia">Croatia</option> 
                        <option value="Cuba">Cuba</option> 
                        <option value="Cyprus">Cyprus</option> 
                        <option value="Czech Republic">Czech Republic</option> 
                        <option value="Denmark">Denmark</option> 
                        <option value="Djibouti">Djibouti</option> 
                        <option value="Dominica">Dominica</option> 
                        <option value="Dominican Republic">Dominican Republic</option> 
                        <option value="Ecuador">Ecuador</option> 
                        <option value="Egypt">Egypt</option> 
                        <option value="El Salvador">El Salvador</option> 
                        <option value="Equatorial Guinea">Equatorial Guinea</option> 
                        <option value="Eritrea">Eritrea</option> 
                        <option value="Estonia">Estonia</option> 
                        <option value="Ethiopia">Ethiopia</option> 
                        <option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option> 
                        <option value="Faroe Islands">Faroe Islands</option> 
                        <option value="Fiji">Fiji</option> 
                        <option value="Finland">Finland</option> 
                        <option value="France">France</option> 
                        <option value="French Guiana">French Guiana</option> 
                        <option value="French Polynesia">French Polynesia</option> 
                        <option value="French Southern Territories">French Southern Territories</option> 
                        <option value="Gabon">Gabon</option> 
                        <option value="Gambia">Gambia</option> 
                        <option value="Georgia">Georgia</option> 
                        <option value="Germany">Germany</option> 
                        <option value="Ghana">Ghana</option> 
                        <option value="Gibraltar">Gibraltar</option> 
                        <option value="Greece">Greece</option> 
                    </select>
                </div>
            
                <div class="formRow">
                    <input type="checkbox" id="check2" name="chbox1" checked="checked" class="check" />
                    <label for="check2"  class="nopadding">Checkbox checked</label>
                    <div class="clear"></div>
                </div>
                <div class="formRow">
                    <input type="radio" id="radio1" name="question1" checked="checked" />
                    <label for="radio1"  class="nopadding">Usual radio button</label>
                    <div class="clear"></div>
                </div>
                <div class="formRow">
                    <label>Usual textarea:</label>
                    <textarea rows="8" cols="" name="textarea" placeholder="Your message"></textarea>
                </div>
                <div class="formRow">
                    <input type="submit" class="buttonS bLightBlue" value="Submit button" />
                </div>
            </div>
        
            <div class="divider"><span></span></div>
            
       </div> 
       <div class="clear"></div>
   </div>
</div>
<!-- Sidebar ends -->


<!-- Content begins -->
<div id="content">
    <div class="contentTop">
        <span class="pageTitle"><span class="icon-key-2"></span>Form validation engines</span>
        <ul class="quickStats">
            <li>
                <a href="" class="blueImg"><img src="images/icons/quickstats/plus.png" alt="" /></a>
                <div class="floatR"><strong class="blue">5489</strong><span>visits</span></div>
            </li>
            <li>
                <a href="" class="redImg"><img src="images/icons/quickstats/user.png" alt="" /></a>
                <div class="floatR"><strong class="blue">4658</strong><span>users</span></div>
            </li>
            <li>
                <a href="" class="greenImg"><img src="images/icons/quickstats/money.png" alt="" /></a>
                <div class="floatR"><strong class="blue">1289</strong><span>orders</span></div>
            </li>
        </ul>
        <div class="clear"></div>
    </div>
    
    <!-- Breadcrumbs line -->
    <div class="breadLine">
        <div class="bc">
            <ul id="breadcrumbs" class="breadcrumbs">
                <li><a href="index.html">Dashboard</a></li>
                <li><a href="forms.html">Forms stuff</a>
                    <ul>
                        <li><a href="forms.html" title="">Inputs &amp; elements</a></li>
                        <li><a href="form_editor.html" title="">File uploader &amp; WYSIWYG</a></li>
                        <li><a href="form_wizards.html" title="">Form wizards</a></li>
                    </ul>
                </li>
                <li class="current"><a href="form_validation.html" title="">Validation</a></li>
            </ul>
        </div>
        
        <div class="breadLinks">
            <ul>
                <li><a href="#" title=""><i class="icos-list"></i><span>Orders</span> <strong>(+58)</strong></a></li>
                <li><a href="#" title=""><i class="icos-check"></i><span>Tasks</span> <strong>(+12)</strong></a></li>
                <li class="has">
                    <a title="">
                        <i class="icos-money3"></i>
                        <span>Invoices</span>
                        <span><img src="images/elements/control/hasddArrow.png" alt="" /></span>
                    </a>
                    <ul>
                        <li><a href="#" title=""><span class="icos-add"></span>New invoice</a></li>
                        <li><a href="#" title=""><span class="icos-archive"></span>History</a></li>
                        <li><a href="#" title=""><span class="icos-printer"></span>Print invoices</a></li>
                    </ul>
                </li>
            </ul>
             <div class="clear"></div>
        </div>
    </div>
    
    <!-- Main content -->
    <div class="wrapper">
        <ul class="middleNavR">
            <li><a href="#" title="Add an article" class="tipN"><img src="images/icons/middlenav/create.png" alt="" /></a></li>
            <li><a href="#" title="Upload files" class="tipN"><img src="images/icons/middlenav/upload.png" alt="" /></a></li>
            <li><a href="#" title="Add something" class="tipN"><img src="images/icons/middlenav/add.png" alt="" /></a></li>
            <li><a href="#" title="Messages" class="tipN"><img src="images/icons/middlenav/dialogs.png" alt="" /></a><strong>8</strong></li>
            <li><a href="#" title="Check statistics" class="tipN"><img src="images/icons/middlenav/stats.png" alt="" /></a></li>
        </ul>
    

        <div class="fluid">
            <form id="validate" class="main" method="post" action="">
                <fieldset>
                    <div class="widget">
                        <div class="whead"><h6>Form validation with popups</h6><div class="clear"></div></div>
                        <div class="formRow">
                            <div class="grid3"><label>Input field validation:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" class="validate[required]" name="req" id="req"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>Password:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="password" class="validate[required]" name="password1" id="password1" /></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>Repeat password:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="password" class="validate[required,equals[password]]" name="password2" id="password2" /></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>Minimum size:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" class="validate[required,minSize[6]]" name="minValid" id="minValid"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>Maximum size:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" class="validate[required,maxSize[6]]" value="0123456789" name="maxValid" id="maxValid"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>Only letters:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" value="this is an invalid char '.'" class="validate[required,custom[onlyLetterSp]]" name="lettersValid" id="lettersValid"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>Only numbers and space:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" value="10.1" class="validate[required,custom[onlyNumberSp]]" name="numsValid" id="numsValid"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>Regular expressions:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" name="regexValid" id="regexValid"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>IP address:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" value="192.168.3." class="validate[required,custom[ipv4]]" name="ipValid" id="ipValid"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>Email address:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" value="" class="validate[required,custom[email]]" name="emailValid" id="emailValid"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>Date validation:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" value="2009/06/30" class="validate[custom[date],past[2010/01/01]]" name="dateValid" id="dateValid"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>Select:<span class="req">*</span></label></div>
                            <div class="grid9">
                                <select name="selectReq" id="selectReq" class="validate[required]" >
                                    <option value="">Usual select box</option>
                                    <option value="opt2">Option 2</option>
                                    <option value="opt3">Option 3</option>
                                    <option value="opt4">Option 4</option>
                                    <option value="opt5">Option 5</option>
                                    <option value="opt6">Option 6</option>
                                    <option value="opt7">Option 7</option>
                                    <option value="opt8">Option 8</option>
                                </select>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>Date format:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" value="2011-01-" class="validate[custom[date],future[NOW]]" name="dateformatValid" id="dateformatValid"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>Textarea:<span class="req">*</span></label></div>
                            <div class="grid9"><textarea rows="8" cols="" name="textarea" class="validate[required]" id="textareaValid"></textarea></div><div class="clear"></div>
                        </div>
                        <div class="formRow"><input type="submit" value="Submit" class="buttonM bBlack formSubmit" /><div class="clear"></div></div>
                        <div class="clear"></div>
                    </div>
                </fieldset>
            </form>
        
            <form id="usualValidate" class="main" method="post" action="">
                <fieldset>
                    <div class="widget">
                        <div class="whead"><h6>Usual form validation</h6><div class="clear"></div></div>
                        <div class="formRow">
                            <div class="grid3"><label>Usual field:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" class="required" name="firstname" id="firstname"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>With minimum chars:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" class="required" name="minChars" id="minChars"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>With maximum chars:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" class="required" name="maxChars" id="maxChars"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>With minimum num:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" class="required" name="mini" id="mini"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>With maximum num:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" class="required" name="maxi" id="maxi"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>With range:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" class="required" name="range" id="range"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>Email field:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" class="required" name="emailField" id="emailField"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>URL field:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" class="required" name="urlField" id="urlField"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>Date field:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" class="required" name="dateField" id="dateField"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>Digits only:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" class="required" name="digitsOnly" id="digitsOnly"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>Custom error message:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" class="required" name="customMessage" id="customMessage"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>Enter password:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" class="required" name="enterPass" id="enterPass"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>Repeat password:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="text" class="required" name="repeatPass" id="repeatPass"/></div><div class="clear"></div>
                        </div>
                        <div class="formRow">
                            <div class="grid3"><label>Something from checks:<span class="req">*</span></label></div>
                            <div class="grid9"><input type="checkbox" id="agree" name="agree" class="required check" /><label for="agree">Accept terms?</label></div><div class="clear"></div>
                        </div>
                        <div class="formRow"><input type="submit" value="Submit" class="buttonM bBlack formSubmit" /><div class="clear"></div></div>
                        <div class="clear"></div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>
<!-- Content ends -->    
        
</body>
</html>